<template>
	<view class="page">
		<!-- 搜索 -->
		<view class="search-box">
			<input v-model="keyword" placeholder="请输入客户名称、手机号进行搜索" />
			<text class="search-btn" @click="onSearch">搜索</text>
		</view>

		<!-- 会员列表（每行一个 card） -->
		<view class="list">
			<view v-for="item in filteredList" :key="item.id" class="card" v-if="number!==0">
				<view class="row"><text class="label">客户名称</text><text class="val">{{item.customerName}}</text></view>
				<view class="row"><text class="label">手机号</text><text class="val">{{item.phoneNumber}}</text></view>
				<view class="row"  @click="toDetail(item.customerId)">
					<text class="label">会员余额</text>
					<text class="val">¥{{item.memberBalance}}</text>
					<image src="../../static/you.png" class="icon-you"></image>
				</view>
				<view class="row">
					<view style="border:solid 1rpx #666666;">
						<input  class="money" type="digit" v-model="item._amount" /></view>
					<button @click="functionCZ(item)">充值</button>
				</view>
			</view>
			<view v-if="number===0"  style="margin-top: 50rpx;text-align: center;background-color: #f6f7f9;">暂无结果</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {onShow} from'@dcloudio/uni-app'
	import { huiyuan,fetchVL,chongZhi} from '../../api/vip'
	import {fetchMoneyDetail}from '../../api/customer'

	const keyword = ref('')
	const amount = ref(0)

	// 会员列表
	const members = ref([])
    const number = computed(() => filteredList.value.length)
	const filteredList = computed(() =>
		members.value.filter(v =>
			v.customerName.includes(keyword.value) || v.phoneNumber.includes(keyword.value)
		)
	)

	function onSearch() {} // 已用 computed 实时过滤
	function toDetail(id) {
		uni.navigateTo({
			url: `/pages/customerManage/customerDetail/detailDetail/detailDetail?id=${id}&type=huiyuan`
		})
	}
	const fetchVipList = async()=>{
		const res = await fetchVL({
		})
		members.value  = res.data || []
		console.log('会员列表：',members.value)
	}
	// 获取消费详情
	const fetchMD =  async()=>{
		await fetchMoneyDetail({
			
		})
	}
	const functionCZ = async (row) => {
	  const val = Number(row._amount)
	  if (!val || val <= 0) {
	    uni.showToast({ title: '请输入正确金额', icon: 'none' })
	    return
	  }
	  const res = await chongZhi({ customerId: row.customerId, changeAmount: val })
	   row.memberBalance = res.data.afterBalance
	  uni.showToast({ title: '充值成功', icon: 'success' })
	  // 可选：清空当前行输入框
	  row._amount = ''
	}
	onShow(()=>{
		fetchVipList()
	})
	onMounted(()=>{
	
		
	})
</script>

<style>
	.page {
		background: #f6f7f9;
		min-height: 100vh;
	}

	.search-box {
		display: flex;
		padding: 20rpx;
		background: #fff;
	}

	.search-box input {
		flex: 1;
		padding: 20rpx;
		border: 1rpx solid #dcdfe6;
		border-radius: 12rpx;
	}

	.search-btn {
		margin-left: 20rpx;
		padding: 20rpx 24rpx;
		background: #aa0000;
		color: #fff;
		border-radius: 12rpx;
	}

	.list {
		padding: 0 20rpx;
	}

	.card {
		margin-top: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .05);
	}

	.row {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
	}

	.row:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 30rpx;
		color: #666;
		width: 200rpx;
	}

	.val {
		font-size: 30rpx;
		color: #333;
		flex: 1;
	}

	.icon-you {
		width: 32rpx;
		height: 32rpx;
		margin-left: auto;
	}
	.money{
		border: none;
	}
</style>